<style>
    .modify-email-box{
        width: 400px;
    }
</style>

<div class="container_wrapper account_default_default" id="account_default">

    <h1 class="title">{{lang.account.default.account}}</h1>

    <div class="describe-box">
        <div class="describe-box-title">{{lang.account.default.welcome}},{{customerInfo.first_name}} {{customerInfo.last_name}}</div>
        <div class="describe-box-label">{{customer.email}}</div>
    </div>
    {% if adminInfo %}
    <div class="order_linked_servie">
        <div class="order_linked_servie_wrapper">
            <div class="service_left">
                {% if adminInfo.avatar == '' %}
                <span class="no_avatar">
                    {% include 'icon_order_linked_service' %}
                </span>
                {% else %}
                <span>
                    <img src="{{adminInfo.avatar}}" />
                </span>
                {% endif %}
            </div>
            <div class="service_right">
                <h4 class="service_name">{{adminInfo.name}} ({{ lang.checkout.link_services }})</h4>
                <div class="service_remark">{{adminInfo.contact_remark}}</div>
            </div>
        </div>
    </div>
    {% endif %}
    <div class="account_default_link">
        <div class="account_default_link_wapper plugin-account_default-box">
            <a href="{{routes.account_orders_url}}" class="secondary_btn">{{lang.account.default.orders | upcase }}</a>
            <a href="{{routes.account_addresses_url}}" class="secondary_btn">{{lang.account.default.address | upcase }}</a>
            {% if storeConfig.wishlist_enable == '1' %}
                <a href="/account/wishlist" class="secondary_btn">{{lang.account.default.my_wishlist | upcase }}</a>
            {% endif %}
            <a href="/account/profilechange" class="secondary_btn">{{lang.account.default.profile | upcase }}</a>
            <a href="{{routes.account_changepassword_url}}" class="secondary_btn">{{lang.account.default.change_password | upcase }}</a>
            <a class="secondary_btn" id='out'>{{lang.account.default.sing_out | upcase }}</a>
        </div>
    </div>


    <div class="plugin-container-footer" ></div>
</div>

<script type="text/html" id="modify-email-temp">
    <div class="df-bg-white df-w-10/12 modify-email-box df-p-5">
        <div class="mo-form-item df-text-center df-text-lg df-font-bold">Modify Email</div>
        <div class="mo-form-item ">
            <div class="mo-form-item-value">
                <input class="mo-form-input" placeholder=""  name='email' value='{{customer.email}}' type="text" />
            </div>
        </div>
        <div class="mo-form-item " >
            <label class="checkbox_label mo-checkbox" style="text-align: left;padding: 0;" for="sub_checkbox">
                <input class=" mo-checkbox_input order_checkbox insurance_checkbox" type="checkbox" name="update_order_email" value="1" id="sub_checkbox" />
                <span class="mo-checkbox_label check_icon">{% include icon_order_checkbox%}</span>{{lang.account.create.sub}}
            </label>
        </div>
        <div class="mo-form-item-value">
            <a href="javascript:;" id='confirm' class="main_btn form_btn">{{lang.general.save }}</a>
        </div>
    </div>
</script>

<script type="text/javascript">
    (function () {
        $("#out").click(function () {
            const self = this;
            moi.confirm({
                title: `{{lang.account.default.sing_out_tips}}`,
                ok: function () {
                    moi.href('/account/logout');
                }
            })

        });
        $("#modifyEmail").click(function(){
            var modifyEmail = moi.popup({ customClass: "popup-quick-body" });
            modifyEmail.addContent($("#modify-email-temp").html());
            modifyEmail.temp.find("#confirm").click(function(){})
        })
    })();
</script>